<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>首页-蜗牛K15在线教育</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/web.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/k15.css}"/>
</head>
<body class="W-body">
<div class="in-wrap">
    <header th:replace="~{commons::#header}"/>
    <div id="aCoursesList">
        <div class="bg-fa of">
            <section class="container">
                <header class="comm-title">
                    <span class="fr mt5"><a href="javascript:void(0)" title="换一换" class="c-master"
                                            onclick="huanyihuan()">换一换</a></span>
                    <h2 class="fl tac">
                        <span class="c-333">为你推荐</span>
                    </h2>
                </header>
                <article class="comm-course-list">
                    <ul class="of" id="weinituijian">

                    </ul>
                    <div class="clear"></div>
                </article>
            </section>
        </div>
        <!-- /为你推荐 结束 -->
        <!-- /网校课程 开始 -->
        <div>
            <section class="container" id="app">
                <header class="comm-title">
                    <h2 class="tac">
                        <span class="c-333">网校课程</span>
                    </h2>
                </header>
                <div>
                    <section class="c-tab-title">
                        <a href="javascript:void(0)" title="精品课程"
                           :class="{'current boutiqueCourse':curr=='fine'}" @click="getCourse('fine')">精品课程</a>
                        <a href="javascript:void(0)" title="最新课程" @click="getCourse('newest')"
                           :class="{'current boutiqueCourse':curr=='newest'}">最新课程</a>
                        <a href="javascript:void(0)" title="全部课程" @click="getCourse('all')"
                           :class="{'current boutiqueCourse':curr=='all'}">全部课程</a>
                    </section>
                </div>
                <div>
                    <article class="comm-course-list">
                        <ul class="of" id="bna">
                            <li th:each="course : ${courses}">
                                <div class="cc-l-wrap">
                                    <section class="course-img">
                                        <img src="images/course/1.jpg" class="img-responsive" :alt="course.name">
                                        <div class="cc-mask">
                                            <a th:href="@{|/course/view/${course.id}|}" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                                        </div>
                                    </section>
                                    <h3 class="hLh30 txtOf mt10">
                                        <a th:href="@{|/course/view/${course.id}|}" class="course-title fsize18 c-333" th:text="${course.name}"></a>
                                    </h3>
                                    <section class="mt10 hLh20 of">
                                            <span class="fr jgTag"><tt
                                                    class="c-fff fsize12 f-fA"></tt></span>
                                        <span class="fl jgAttr c-ccc f-fA"> <tt
                                                class="c-999 f-fA">9632人学习</tt></span>
                                    </section>
                                </div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </article>
                    <section class="tac pt20">
                        <a th:href="@{/course/list}" title="全部课程"
                           class="comm-btn c-btn-2">全部课程</a>
                    </section>
                </div>
            </section>
        </div>
        <!-- /网校课程 结束 -->
    </div>
    <!-- 公共底引入 -->
    <footer th:replace="~{commons::#footer}"/>
</div>
</body>
</html>